<template>
    <div class="order-created" :style="style">
        <van-tabs
                v-model="active"
                @click="onTabClick"
                style="width: 100%;"
                class="new-list"
                :line-width="line_width"
        >
            <van-tab title="快递配送"></van-tab>
            <van-tab title="到店自提"></van-tab>
        </van-tabs>
        <div class="order-container" v-if="active===0">
            <div class="address-all">
                <div class="address">
                    <div class="first-a">
                        <svg aria-hidden="true" class="icon-address">
                            <use xlink:href="#icon-address"/>
                        </svg>
                        <div
                                class="address-content"
                                v-if="prepareData.address"
                                @click="addressChoose"
                        >
                            <div class="address-per">
                                <div class="receive">收货人：{{prepareData.address.name}}</div>
                                <div class="phone">{{prepareData.address.phone}}</div>
                            </div>
                            <div
                                    class="address-area"
                            >收货地址：{{prepareData.address.province + prepareData.address.city + prepareData.address.county
                                + prepareData.address.address}}
                            </div>
                        </div>
                        <div class="address-content-no" v-else @click="addAddress">点击填写收货地址</div>
                        <svg
                                aria-hidden="true"
                                class="edit-address"
                                @click="toEditAddress(prepareData.address)"
                        >
                            <use xlink:href="#icon-edit"/>
                        </svg>
                    </div>
                </div>
                <div class="bottom-color">
                    <border-colorful></border-colorful>
                </div>
            </div>
            <div class="goods">
                <div
                        class="goods-singles"
                        v-for="(item, index) in prepareData.products"
                        :key="index"
                >
                    <order-single-goods
                            :good="item"
                            :isup="prepareData.isup"
                            :index="index"
                            @gotRemark="gotRemark"
                    />
                </div>
            </div>
            <div class="line"></div>
            <div class="freight">
                <div class="freight-title">运费</div>
                <div class="freight-value">快递：{{prepareData.freight| moneyFmt(2, '￥')}}</div>
            </div>
            <div class="line"></div>
            <div class="freight" v-if="createOrderData.groupid">
                <div class="freight-title">拼团时效</div>
                <div class="freight-value">{{ageing}}小时</div>
            </div>
            <div v-if="prepareData.issea">
                <div class="line"></div>
                <van-cell title="上传身份信息" :value="value" @click="toUploadPic" is-link required/>
                <van-field v-model="id_number" label="身份证号" placeholder="请输入收件人身份证号" required/>
                <div class="sea-tip">
                    <p>*收货人姓名必须与身份证保持一致</p>
                    <p>*海外直邮到货时间较长 约一周以上 望知晓</p>
                </div>
            </div>
        </div>
        <confirm ref="frozen" text="自提功能暂未开通" :isAlert="true" @confirm="frozen"/>
        <!--<div v-if="active===1">-->
        <!--<div class="come-to-store">-->
        <!--<div class="store-store">-->
        <!--<div class="all-store">-->
        <!--<div class="store-choose">选择自提点</div>-->
        <!--<svg aria-hidden="true" class="right">-->
        <!--<use xlink:href="#icon-arrow_right"></use>-->
        <!--</svg>-->
        <!--</div>-->
        <!--<div class="store-map">-->
        <!--<order-map :center="[longitude,latitude]" :position="position" v-if="longitude !== ''"></order-map>-->
        <!--<div class="store-self-location">-->
        <!--<svg aria-hidden="true" class="icon-address">-->
        <!--<use xlink:href="#icon-address"></use>-->
        <!--</svg>-->
        <!--{{currentLocation}}-->
        <!--<div class="location-icon">我的位置</div>-->
        <!--</div>-->
        <!--<div class="store-near">-->
        <!--<store-nearby :nearList="nearList"></store-nearby>-->
        <!--</div>-->
        <!--</div>-->
        <!--</div>-->
        <!--<div class="store-goods">-->
        <!--</div>-->
        <!--</div>-->
        <!--</div>-->
        <div class="bottom">
            <div class="total">
                <div class="total-num">共{{prepareData.count}}件</div>
                <div class="total-amount">
                    合计：
                    <span>{{totalPrice | moneyFmt(2, '￥')}}</span>
                </div>
            </div>
            <div class="submit" :class="{'avtive':isActive}" @click="createOrder">{{textBtn}}</div>
        </div>
    </div>
</template>

<script>
    // import OrderGoods from "../../components/common/order-goods";
    import API from '../../request/api';
    // import InputItem from "../../components/common/input-item";
    import OrderSingleGoods from '../../components/common/order-single-goods';
    import {commonMixin} from '@/common/mixin'; //locationMixin
    // import AmapStore from "../../components/Online/amap-store";
    // import OrderMap from "../../components/Online/order-map";
    // import StoreNearby from "../../components/Online/store-nearby";
    import BorderColorful from '../../components/common/border-colorful';
    import Confirm from '../../components/common/confirm';

    const HEIGHT = document.documentElement.clientHeight - 50 + 'px';
    import regular from '@/common/regular';

    export default {
        mixins: [commonMixin], //locationMixin
        components: {
            Confirm,
            BorderColorful,
            // StoreNearby,
            // OrderMap,
            // AmapStore,
            OrderSingleGoods
            // OrderGoods,
            // InputItem
        },
        name: 'order-created',
        data() {
            return {
                isActive: false,
                textBtn: '提交订单',
                style: {
                    height: HEIGHT
                },
                line_width: 56, //tab下划线宽度
                createOrderData: {}, // 创建订单数据
                active: 0, //tab栏下标
                hasAddress: false, // 是否有默认地址
                prepareData: {},
                deduState: false, //零钱是否足够抵扣
                type: '',
                remark: '',
                ageing: '', // 拼团商品时长
                value: '点击上传', //上传提示
                front: '', // 身份证正面
                back: '', // 身份证反面
                id_number: '', // 身份证号
                isDisabled: true,
                position: [], //自提点经纬度
                nearList: [] //附近自提点
            };
        },
        computed: {
            //自提订单打开
            // getDeduState() {
            //     let flag = false;
            //     if(this.deduState && this.prepareData.deduction > 0) {
            //         flag = true
            //     }
            //     return flag
            // },
            // longitude() {
            //     if (this.location.position) {
            //         return this.location.position.lng || '';
            //     }
            //     return '';
            // },
            // latitude() {
            //     if (this.location.position) {
            //         return this.location.position.lat || '';
            //     }
            //     return '';
            // },
            // currentLocation(){
            //     let address = this.location.addressComponent
            //     if (address) {
            //         return address.district + address.street + address.streetNumber
            //     }
            // },
            systemId() {
                return this.$store.state.login.system;
            },
            totalPrice() {
                let total = Number(this.prepareData.total);
                if (this.deduState && this.prepareData.deduction) {
                    total =
                        Number(this.prepareData.total) -
                        Number(this.prepareData.deduction);
                }
                return total;
            },
            orderType() {
                let type = 1;
                if (this.active === 1) {
                    type = 3;
                }
                if (this.createOrderData.groupid) {
                    type = 4;
                }
                return type;
            }
        },
        methods: {
            frozen() {
                this.active = 0;
            },
            onTabClick(index) {
                // 更换购物车类型
                this.active = index;
                switch (index) {
                    case 0:
                        break;
                    case 1:
                        this.$refs.frozen.show();
                        break;
                }
            },
            // 获取页面初始数据
            getOrderDatas() {
                let orderData = this.createOrderData;
                let data = this.$store.state.user.ticketArr[this.systemId];
                if (data) {
                    orderData.ticket_id = data[0];
                }
                // this.type = Number(this.createOrderData.type);
                if (this.$route.query.id) {
                    orderData.address_id = this.$route.query.id;
                }
                console.log('getOrderDatas', orderData);
                // 获取创建订单页面数据
                this.request
                    .post(API.onlineGetOrderPrepare, orderData)
                    .then(res => {
                        // console.log('res',res);
                        if (res.canbuy) {
                            this.prepareData = res;
                        } else {
                            this.$dialog
                                .alert({
                                    message: '海外直邮商品需要单独下单'
                                })
                                .then(() => {
                                    // on close
                                    this.$router.back();
                                });
                        }
                        if (res.notshipment == 1) {
                            //不配送
                            this.isActive = true;
                            this.textBtn = '此地区不发货';
                        }
                        this.hideGlobaLoading(); //关闭loading
                    })
                    .catch(err => {
                        this.hideGlobaLoading(); //关闭loading
                        console.error('getOrderDatda-error', err);
                    });
            },

            getGroupAneing() {
                let orderData = this.createOrderData;
                if (orderData.groupid) {
                    this.request
                        .get(API.getGroupGoodsAgeing, {
                            gid: orderData.data[0].gid
                        })
                        .then(res => {
                            this.ageing = parseInt(res / 3600);
                            console.log(
                                'times',
                                'time',
                                'this.ageing',
                                this.ageing
                            );
                        })
                        .catch(err => {
                            console.error('getGroupGoodsAgeing-error', err);
                        });
                }
            },
            addAddress() {
                this.$router.push({
                    name: 'address-add',
                    query: {
                        set: true
                    }
                });
            },
            addressChoose() {
                if (this.prepareData.isup == 0) {
                    this.$toast({
                        message: '此订单不支持修改地址',
                        duration: 1500
                    });
                    return;
                }
                this.$router.push({
                    name: 'address-choose',
                    query: {
                        id: this.prepareData.address.id
                    }
                });
            },
            createOrder() {
                if (this.isActive) {
                    return;
                }
                this.showGlobaLoading(); //关闭loading
                let createData = this.createOrderData;
                let data = {};
                data.data = createData.data;
                data.type = this.orderType; //订单类型
                data.deduction = this.deduState;
                if (createData.groupid) {
                    // 临时推荐人id
                    data.groupid = createData.groupid;
                }
                if (createData.is_cart) {
                    data.is_cart = createData.is_cart;
                }
                if (this.prepareData.issea) {
                    if (
                        this.id_number &&
                        regular.REGEX_IDENTITY.test(this.id_number)
                    ) {
                        data.id_number = this.id_number;
                    } else {
                        this.$toast({
                            message: '请填写正确的身份证号码',
                            duration: 1500
                        });
                        this.hideGlobaLoading(); //关闭loading
                        return;
                    }
                    if (this.front) {
                        data.front = this.front;
                    } else {
                        this.$toast({
                            message: '请上传身份证照片（正面）',
                            duration: 1500
                        });
                        this.hideGlobaLoading(); //关闭loading
                        return;
                    }
                    if (this.back) {
                        data.back = this.back;
                    } else {
                        this.$toast({
                            message: '请上传身份证照片（反面）',
                            duration: 1500
                        });
                        this.hideGlobaLoading(); //关闭loading
                        return;
                    }
                }
                if (this.prepareData.address.id) {
                    data.address_id = this.prepareData.address.id;
                    // 创建订单
                    this.request
                        .post(API.onlineCreateOrder, data)
                        .then(res => {
                            if (res) {
                                //预存支付页面需要的部分参数--涉及密码可能会跳走，保证参数不会消失
                                let datas = {
                                    getWayData: res,
                                    groupid: data.groupid,
                                    type: this.orderType
                                };
                                this.$store.commit('dataCreatePay', datas);
                                this.$router.push({
                                    name: 'pay-choose'
                                });
                                // 清空创建订单所需的数据
                                this.$store.commit('dataCreateOrder', '');
                                this.actBindOrder(res);
                                this.hideGlobaLoading(); //关闭loading
                            }
                        })
                        .catch(err => {
                            this.hideGlobaLoading(); //关闭loading
                            console.error('createOrder-error', err);
                        });
                } else {
                    this.hideGlobaLoading(); //关闭loading
                    this.$toast('请选择收货地址');
                }
                console.log('createOrder-data', data);
            },
            actBindOrder(order) {
                let data = this.$store.state.user.ticketArr[this.systemId];
                this.request
                    .post(API.actBindOrder, {
                        ...order,
                        ticket_id: data[0]
                    })
                    .then(res => {
                    })
                    .catch(err => {
                        console.error('actBindOrder-error', err);
                    });
            },
            gotRemark(reData) {
                let create = this.createOrderData;
                create.data[reData.index].remark = reData.remark;
                this.$store.commit('dataCreateOrder', create);
                console.log('gotRemark', reData, create);
                // this.remark = reData.remark;
            },
            toEditAddress(address) {
                if (address) {
                    this.addressChoose();
                } else {
                    this.addAddress();
                }
            },
            toUploadPic() {
                this.$router.push({
                    name: 'upload-idpic',
                    query: {
                        ...this.$route.query,
                        front: this.front,
                        back: this.back
                    }
                });
            }
        },
        created() {
            this.showGlobaLoading(); //打开loading
            this.createOrderData = this.$store.state.online.createOrderData;
            if (this.createOrderData !== '') {
                this.getOrderDatas();
                // 获取时效
                this.getGroupAneing();
                if (this.$route.query.front) {
                    this.front = this.$route.query.front;
                    this.back = this.$route.query.back;
                    this.value = '已上传';
                    console.log('kkkkkk,', this.$route.query);
                }
                //自提订单打开
                // this.getCurrentPositon();
                // this.getLocationAddress()
            } else {
                // this.$router.go(-1);
                if (this.$store.state.online.createPayData.groupid) {
                    this.$router.replace({
                        name: 'group-order-list'
                    });
                } else if (this.$store.state.online.createPayData === '') {
                    this.$router.go(-1);
                } else {
                    this.$router.replace({
                        name: 'order-list-new',
                        query: {
                            active: 1
                        }
                    });
                }
                this.hideGlobaLoading(); //关闭loading
            }
        }
    };
</script>

<style lang='stylus' rel='stylesheet/stylus' scoped>
    @import '~@/assets/main.styl';

    >>> .van-tabs__line {
        background-color: main-color;
    }

    >>> .van-tab {
        color: gray3;
    }

    >>> .van-tab--active {
        color: main-color;
    }

    >>> .van-cell {
        margin-top: smallMargin;
    }

    >>> .van-field__control {
        text-align: right;
    }

    .order-created {
        overflow-x: hidden;
        width: vw(375);
    }

    .order-container {
        margin-bottom: vw(20);
    }

    .address-all {
        width: 100%;
        height: vw(93);
        background-color: grayF;

        .address {
            height: vw(61);
            padding: cellPadding;
            display: flex;
            align-items: center;

            /* border 1px chocolate solid */

            .first-a {
                width: 100%;
                display: flex;
                justify-content: space-between;
                align-items: center;
                word-vw(word14, gray9);
                line-height: vw(19);

                .icon-address {
                    width: vw(14);
                    height: vw(18);
                }

                .address-content {
                    width: vw(291);
                    word-vw(word14, gray3);

                    /* border 1px solid aqua */

                    .address-per {
                        display: flex;
                        justify-content: space-between;
                        line-height: 1.5;
                        margin-right: smallMargin;
                    }

                    .address-area {
                        display: flex;
                        justify-content: space-between;
                        flex-wrap: wrap;
                        color: gray9;
                        line-height: 1.5;
                    }

                    .receive {
                        margin-right: vw(30);
                    }
                }

                .address-content-no {
                }

                .edit-address {
                    width: vw(15);
                    height: vw(16);
                }
            }
        }

        .bottom-color {
            position: relative;
            bottom: 0;
            width: vw(375);
        }
    }

    .goods {
        width: vw(375);
        margin-top: smallMargin;

        .goods-singles {
            background-color: grayF;
            margin-bottom: smallMargin;
        }
    }

    .remark {
        border: none;
        width: 100vw;
        height: vw(60);
        word-vw(word12, gray9);
        line-height: vw(16);
        margin-top: smallMargin;
        background-color: grayF;
        box-sizing: border-box;
        padding: vw(10);
    }

    .freight {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        height: vw(45);
        background-color: grayF;
        word-vw(word14, gray3);

        .freight-title {
            padding-left: cellPadding;
        }

        .freight-value {
            padding-right: cellPadding;
        }
    }

    .deduction {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100vw;
        height: vw(60);
        word-vw(word16, gray3);
        line-height: vw(21);
        margin-top: smallMargin;
        background-color: grayF;
        box-sizing: border-box;
        padding: smallMargin;

        .change-num {
            display: flex;
            align-items: center;

            .selected {
                margin-left: smallMargin;
                width: vw(20);
                height: vw(20);
            }

            .no-choose {
                fill: grayE;
            }

            .choose {
                fill: main-color;
            }
        }
    }

    .sea-tip {
        margin-top: vw(20);
        margin-left: cellPadding;

        p {
            margin-bottom: vw(10);
            word-vw(word12, main-color);
            line-height: vw(17);
        }
    }

    .bottom {
        background: grayF;
        position: fixed;
        bottom: 0;
        width: vw(375);
        height: vw(60);
        display: flex;
        align-items: center;
        box-sizing: border-box;
        word-vw(word14, gray3);
        line-height: vw(19);
        padding: smallMargin;

        .total {
            display: flex;
            flex-direction: column;

            .total-num {
                word-vw(word12, gray9);
                line-height: vw(16);
            }

            .total-amount {
                span {
                    color: main-color;
                }
            }
        }

        .submit {
            secondary-solid();
            font-size: word14;
            line-height: vw(19);
            position: absolute;
            right: smallMargin;
            display: flex;
            align-items: center;
            text-align: center;
            justify-content: center;
        }

        .avtive {
            background grayE
        }
    }

    .come-to-store {
        .store-store {
            width: 100%;

            .all-store {
                width: 100%;
                background-color: grayF;
                height: vw(45);
                display: flex;
                justify-content: space-between;
                align-items: center;
                word-vw(word14, gray3);
                line-height: vw(19);

                .store-choose {
                    padding-left: cellPadding;
                }

                svg {
                    width: vw(12);
                    height: vw(15);
                    padding-right: cellPadding;
                }
            }

            .store-map {
                .store-self-location {
                    width: 100%;
                    height: vw(60);
                    background-color: grayF;
                    border-top: vw(1) solid grayE;
                    display: flex;
                    align-items: center;
                    word-vw(word14, gray3);
                    line-height: vw(19);

                    .icon-address {
                        width: vw(14);
                        height: vw(18);
                        padding: 0 cellPadding;
                    }

                    .location-icon {
                        width: vw(65);
                        height: vw(20);
                        border-radius: all-radius;
                        border: vw(1) solid main-color;
                        word-vw(word12, main-color);
                        line-height: vw(16);
                        margin-left: smallMargin;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                    }
                }

                .store-near {
                    /* border 1px solid aqua */
                }
            }
        }
    }
</style>
